<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="NES.css is a NES-style CSS Framework." />
    <meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
    <meta name="author" content="© 2018 B.C.Rikko" />
    <meta name="theme-color" content="#212529"/>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link rel="shortcut icon" sizes="196x196" href="favicon.png">
    <link rel="apple-touch-icon" href="favicon.png">

    <title>NES.css - NES-style CSS Framework</title>

    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
    <link href="./style.css" rel="stylesheet" />
    <script src="./lib/vue.min.js"></script>

    <script src="./lib/dialog-polyfill.js"></script>
    <script src="./lib/highlight.js"></script>

    <meta property="og:type" content="website" />
    <meta property="og:title" content="NES.css" />
    <meta property="og:url" content="https://nostalgic-css.github.io/NES.css/" />
    <meta property="og:description" content="NES-style CSS Framework | ファミコン風CSSフレームワーク" />
    <meta property="og:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@bc_rikko" />
    <meta name="twitter:creator" content="@bc_rikko" />
    <meta name="twitter:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js", new Date());gtag("config", "UA-41640153-4");</script>
    <script>
      if (window.navigator.userAgent.toLocaleLowerCase().indexOf('trident') !== -1) {
        window.alert('IE is not supported on this page.')
      }

    </script>
  </head>

  <body>
    <div id="nescss">
      <header :class="{ sticky: scrollPos > 50 }">
        <div class="container">
          <div class="nav-brand">
            <a href="https://nostalgic-css.github.io/NES.css/">
              <h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
            </a>
            <p>NES-style CSS Framework.</p>
          </div>

          <div class="social-buttons">
            <p>Share on SNS</p>
            <div class="share">
              <a href="https://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/" target="_blank"><i class="nes-icon twitter"></i></a>
              <a href="https://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework" target="_blank"><i class="nes-icon facebook"></i></a>
              <a href="https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework" target="_blank"><i class="nes-icon linkedin"></i></a>
              <a href="https://github.com/nostalgic-css/NES.css" target="_blank"><i class="nes-icon github"></i></a>
            </div>
          </div>
        </div>
      </header>

      <div class="container">
        <main class="main-content">
          <a class="github-link" :class="{ active:  scrollPos < 200 }" href="https://github.com/nostalgic-css/NES.css" target="_blank" rel="noopener" @mouseover="startAnimate" @mouseout="stopAnimate">
            <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
            <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
          </a>

          <!-- About -->
          <section class="topic">
            <h2 id="about"><a href="#about">#</a>About</h2>
            <p>NES.css is NES-style (8bit-like) CSS Framework.</p>
          </section>


          <!-- Installation -->
          <section class="topic">
            <h2 id="installation"><a href="#installation">#</a>Installation</h2>
            <p>NES.css is available via either npm or Yarn, or a CDN.</p>
            <p>Please read <a href="https://github.com/nostalgic-css/NES.css" target="_blank" rel="noopener">README.md</a>.</p>
          </section>

          <!-- Usage -->
          <section class="topic">
            <h2 id="usage"><a href="#usage">#</a>Usage</h2>
            <p>NES.css only provides components. You will need to define your own layout.</p>

            <section class="showcase" v-for="sample in collection" :key="sample">
              <section class="nes-container with-title">
                <h3 class="title">{{ sample.title | capitalize }}</h3>
                <div
                  :id="sample.title"
                  class="item"
                  v-html="sample.code">
                </div>
                <p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
                <p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
                <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
              </section>
              <section class="samplecode" v-show="sample.showCode">
                <button type="button" class="nes-btn copycode" @click="copy($event, sample.title)">copy</button>
                <pre><code class="html">{{ sample.code }}</code></pre>
              </section>
            </section>
          </section>

          <!-- Members -->
          <section class="topic">
            <h2 id="members"><a href="#members">#</a>Members</h2>
            <section class="coreteam">
              <h3 class="topic-title"><i class="nes-icon star"></i>Core Team Members</h3>
              <p>Here is core team members developing NES.css.</p>

              <div class="coreteam-members">
                <template v-for="member in coreteam">
                  <section class="nes-container is-dark member-card">
                    <div class="avatar">
                      <img class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Core Member ' + member.name">
                    </div>
                    <div class="profile">
                      <h4 class="name">{{ member.name }}</h4>
                      <p>{{ member.feat }}</p>
                      <div>
                        <a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
                        <a v-if="member.twitter" :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><i class="nes-icon twitter"></i></a>
                      </div>
                    </div>
                  </section>
                </template>
              </div>
            </section>
            <section class="coreteam-emeriti" v-if="emeriti.length > 0">
              <h3 class="topic-title"><i class="nes-icon trophy"></i>Core Team Emeriti</h3>
              <p>Here we honor some no-longer-active core team members.</p>

              <div class="coreteam-members">
                <template v-for="member in emeriti">
                  <section class="nes-container is-dark member-card">
                    <div class="avatar">
                      <img class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Emeriti ' + member.name">
                    </div>
                    <div class="profile">
                      <h4 class="name">{{ member.name }}</h4>
                      <p>{{ member.feat }}</p>
                      <div>
                        <a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
                        <a v-if="member.twitter" :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><i class="nes-icon twitter"></i></a>
                      </div>
                    </div>
                  </section>
                </template>
              </div>
            </section>
            <section class="contributors">
              <h3 class="topic-title"><i class="nes-icon heart"></i>Contributors</h3>
              <template v-for="user in contributors">
                <a class="contributor" :href="'https://github.com/' + user" target="_black">
                  <img class="nes-avatar is-large is-rounded lazy" :data-src="'https://github.com/' + user + '.png?size=64'" :alt="'Contributor ' + user">
                  <p>{{ user }}</p>
                </a>
              </template>
            </section>
          </section>

          <!-- Articles -->
          <section class="topic">
              <h2 id="articles"><a href="#articles">#</a>Articles</h2>
              <article class="article-link">
                <h3 class="title">
                  <a href="https://medium.com/@bc_rikko/why-i-created-and-released-nes-css-ee8966bacd09" target="_blank" rel="noopener"><i class="nes-icon medium"></i><span>Why I created and released NES.css</span></a>
                </h3>
              </article>
              <article class="article-link">
                <h3 class="title">
                  <a href="https://github.blog/2019-01-20-release-radar-december-2018/#nes-css-1-0" target="_blank" rel="noopener"><i class="nes-icon github"></i><span>Release Radar·December 2018|The GitHub Blog</span></a>
                </h3>
              </article>
          </section>

        </main>

        <footer>
          <p>
            <span>&copy;2018</span>
            <a href="https://kuroeveryday.blogspot.com/" target="_blank" rel="noopener">Black Everyday Company</a>
            <span>-</span>
            <a href="https://twitter.com/bc_rikko" target="_blank" rel="noopener">@bc_rikko</a>
          </p>
        </footer>

        <!-- Copied balloon -->
        <div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
          <p>copied!!</p>
        </div>

        <!-- FAB Button -->
        <button type="button" class="nes-btn is-error scroll-btn" :class="{ active: scrollPos > 500 }" @click="window.scrollTo({ top:0, behavior: 'smooth' })"><span>&lt;</span></button>
      </div>
    </div>
  </body>
  <script src="./script.js"></script>
  <script>
    const h = document.querySelector('head');
    ['./lib/dialog-polyfill.css', './lib/highlight-theme.css'].forEach(a => {
      const l = document.createElement('link');
      l.href = a;
      l.rel = 'stylesheet';
      h.appendChild(l);
    })
  </script>
</html>
